<template>
  <div class="wrap pd20 dataStatistics">
    <el-form label-position="top" ref="form" :model="form" :rules="rules" class="form">
      <el-form-item :label="$t('configLazyLoad.dataStatis.tips1')">
        <el-radio-group v-model.trim="form.chatCheck">
          <el-radio  label="1">{{$t('public.yes')}}</el-radio>
          <el-radio  label="0">{{$t('public.no')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <span class="help-tips">{{$t('configLazyLoad.dataStatis.tips2')}}</span>
      <div v-if="form.chatCheck === '1'">
        <el-form-item :label="$t('configLazyLoad.dataStatis.tips3')" class="padding-top" prop="goodNum">
          <el-input v-model.trim="form.goodNum">
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.dataStatis.tips4')" class="padding-top" prop="badNum">
          <el-input v-model.trim="form.badNum">
          </el-input>
        </el-form-item>
      </div>
      <el-form-item :label="$t('configLazyLoad.dataStatis.tips5')" style="display: none">
        <el-radio-group v-model.trim="form.uvpvSwitch">
          <el-radio  label="true">{{$t('public.yes')}}</el-radio>
          <el-radio  label="false">{{$t('public.no')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <span class="help-tips" style="display: none">{{$t('configLazyLoad.dataStatis.tips6')}}</span>
      <el-form-item :label="$t('config.channel.instantRespTimeSet')" class="padding-top" prop="instantRespTime">
        <el-input v-model.trim="form.instantRespTime" type="number">
          <template slot="append">S</template>
        </el-input>
      </el-form-item>
      <span class="help-tips">
        {{$t('config.channel.instantRespTimeTip')}}
      </span>
      <el-form-item class="padding-top">
        <el-button type="primary" class="primary_btn fr" @click="submitForm">{{$t('config.channel.saveSettings')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {checkform} from '@/utils/validate'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      let self = this
      let validate1 = (rule, value, callback) => {
        if (self.form.chatCheck === '1') {
          let message = checkform(value, 'Number3')
          if (value === '') {
            callback(new Error(self.$t('validate.required')))
          } else if (message) {
            callback(new Error(this.$t(message)))
          } else if (Number(self.form.badNum) >= Number(self.form.goodNum)) {
            callback(new Error(this.$t('configLazyLoad.dataStatis.errorTips')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      let validate2 = (rule, value, callback) => {
        if ( 1 <= Number(value) && Number(value) <= 600) {
          callback()
        } else{
          callback(new Error(this.$t('config.channel.instantRespTimeTipRule')))
        }
      }
      return {
        form: {
          uvpvSwitch: 'false',
          chatCheck: '0',
          goodNum: '',
          badNum: '',
          instantRespTime: 40
        },
        submitObj: {},
        rules: {
          goodNum: [
            {validator: validate1, trigger: 'blur'}
          ],
          badNum: [
            {validator: validate1, trigger: 'blur'}
          ],
          instantRespTime: [
            {validator: validate2, trigger: 'blur'}
          ]
        }
      }
    },
    components: {
    },
    computed: {
    },
    methods: {
      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            for (let i in this.form) {
              this.submitObj[i] = this.form[i]
            }
            this.$store.dispatch('saveGlobalSet', this.submitObj).then((rep) => {
              if (rep.success) {
                this.$message.success(this.$t('config.channel.configSuccess'))
              } else {
                this.$message.error(this.$t('qualityCheck.saveFali'))
              }
            })
          }
        })
      }
    },
    beforeMount () {
      this.$store.dispatch('getGlobalSetById', {}).then((resp) => {
        if (resp.row) {
          this.submitObj = resp.row
          for (let i in this.form) {
            this.form[i] = this.submitObj[i]
          }
          this.form.chatCheck = this.form.chatCheck ? this.form.chatCheck : '0'
          this.form.uvpvSwitch = this.form.uvpvSwitch ? this.form.uvpvSwitch : 'false'
          this.form.instantRespTime = this.form.instantRespTime ? this.form.instantRespTime : 40
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wrap
    padding 20px 16px
  .help-tips
    color $cf-gray4
  .padding-top
    padding-top 15px
  .form
    width 400px
</style>
<style lang="stylus">
  .dataStatistics
    .el-input-group--append
      margin-top 5px
</style>
